<template>
  <div class="content">
    <!-- 表格区域 -->
    <el-table height="80.5vh" :data="noticeList" style="width: 100%;" :header-cell-style="{color:'black'}">
      <el-table-column label="公告标题" min-width="500px">
        <template v-slot="scope">
          <router-link
            :to="{name:'noticeDetails',query:{id:scope.row}}"
            class="Bold"
          >{{ scope.row.title }}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="250px">
        <template v-slot="scope">
          <span class="Bold">{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="text" class="check" @click="toRouter(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="dingwei">
      <el-pagination
        :current-page="query.page"
        :page-sizes="$arrays.tableSize"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getNoticeList } from '@/api/notice'

export default {
  name: 'NoticeList',
  data() {
    return {
      query: {
        limit: 20, // 每页数量
        page: 1, // 页码
        title: '' // 标题
      },
      noticeList: [],
      total: 0
    }
  },
  created() {
    this.getNoticeList()
  },
  methods: {
    getNoticeList() {
      getNoticeList(this.query).then((res) => {
        this.noticeList = res.data.data.data
        this.total = res.data.data.total
      })
    },
    handleSizeChange(newPageSize) {
      this.query.limit = newPageSize
      this.getNoticeList()
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getNoticeList()
    },
    toRouter(row) {
      // :to="{name:'noticeDetails',query:{id:scope.row}}"
      localStorage.setItem('row', JSON.stringify(row))
      this.$router.push({ name: 'noticeDetails' })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  .check {
    color: #5e9cff;
    margin-right: 32px;
  }
}
.Bold {
  color: black;
}
.content {
  padding: 24px;
}
</style>
